<template>
  <div>

    <el-row style="margin-top: 150px;">
      <el-col :span="8" :offset="8">

        <el-form label-position="right" :status-icon="true" :inline="false" :inline-message="false" ref="myform"
          label-width="120px">
          <el-form-item>
            <h1 style="text-align: center;">欢迎使用music</h1>
          </el-form-item>
          <template>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="用户名登录" name="first">
                <router-view></router-view>
              </el-tab-pane>
              <el-tab-pane label="手机号登录" name="second">
                <router-view></router-view>
              </el-tab-pane>
            </el-tabs>
          </template>
          <!--rules中的name属性绑定。用name的规则校验数据-->
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: 'Login',
    data() {
      return {
        activeName: 'first'
      }
    },
    methods: {
      handleClick() {
        console.log(this.activeName)
        if (this.activeName === 'first') {
          this.$router.push({
            name: 'UserLogin'
          })
        } else if (this.activeName === 'second') {
          this.$router.push({
            name: 'PhoneLogin'
          })
        }
      }
    },
    mounted() {
      this.$router.push({
        name: 'UserLogin'
      })
    },
  }

</script>

<style>
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

</style>
